Ographe.SimplegrapheView = Ember.View.extend({
  didInsertElement: function () {

    var elementId = this.get('elementId');
    var content = this.get('content');
    
    // Set the dimensions of the canvas / graph
    var margin = { top: 35, right: 35, bottom: 35, left: 35};
        var w = 500 - margin.right - margin.left;
        var h = 300 - margin.top - margin.top;

    // Parse the date / time
    function parseDate(d) {
      return new Date(d.substring(0, 4), d.substring(4, 6) - 1, d
        .substring(6, 8), d.substring(8, 10), d.substring(10, 12));
    }

    // Set the ranges
        var x = d3.time.scale()
            .range([0,w]);
        var y = d3.scale.linear()
            .range([h,0]);    
        var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
        var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

    // Define the line
      var line = d3.svg.line()
            .x(function(d) { return x(d.date)})
            .y(function(d) { return y(d.close)});
        this.set('line',line);
    

    // Adds the svg canvas
        var chart = d3.select('#'+elementId).append('svg:svg')
            .attr('id','chart')
            .attr('width', w+margin.left+margin.right)
            .attr('height', h+margin.top+margin.bottom)
            .append('svg:g')
            .attr('transform', 'translate('+margin.left+','+margin.top+')');


    // Get the data
    d3.json('/firstgraph', function (error, mydata) {
      var data = JSON.parse(mydata);
      data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
      });
      // Scale the range of the data
      x.domain(d3.extent(data, function (d) {
        return d.date;
      }));
      y.domain([0, d3.max(data, function (d) {
        return d.close;
      })]);

              // Add Chart Elements to Chart:
        chart.append('svg:g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + h + ')')
            .call(xAxis);
        
        chart.append('svg:g')
            .attr('class', 'y axis')
            .call(yAxis);
                             
        chart.append('svg:path')
            .attr('class', 'line')
            .attr('d', line(data));
        this.chart=chart;


    });
  }
})